07. Unit Testing in Gulp

Having Difficulties with PhantomJS?

As of mid-2018, PhantomJS is no longer being actively maintained by its developers. If you're running into issues getting Jasmine up and running with Gulp, check out the gulp-jasmine-browser npm package instead. Feel free to follow the instructions below to get things started:

1. Install the Necessary Packages

To make sure everything runs smoothly, we'll first need to install Jasmine's official core files for use by NodeJS projects. Go into your terminal, and in the project's root directory, enter in:

npm install jasmine-core

Since we want to run the tests directly in the terminal, we'll also need puppeteer as well:

npm install puppeteer

And of course, we'll need to install gulp-jasmine-browser itself!

npm install gulp-jasmine-browser

2. Update the gulpfile

Gulp needs to know this is necessary for our project. Just as before, we'll make sure this is noted in the same gulpfile.js we've been working on to this point:

const jasmineBrowser = require('gulp-jasmine-browser');

3. Add a "tests" Task

While still in gulpfile.js, create the following task:

gulp.task('tests', function() {
    return gulp
        .src('tests/spec/extraSpec.js')
        .pipe(jasmineBrowser.specRunner({ console: true }))
        .pipe(jasmineBrowser.headless({ driver: 'chrome' }));
});

This allows Jasmine tests to be run headlessly in the terminal itself.

4. Run Tests

At this point, feel free to run gulp tests in your terminal. The tests written in the specified file (tests/spec/extraSpec.js) will be run, and you should see the result outputted in the terminal!

5. Run Tests in the Browser (Optional)

What if you'd still like to run the tests in your browser? Rather than using the code in the third step, modify your "tests" task to look like the following instead:

gulp.task('tests', function() {
    gulp
        .src('tests/spec/extraSpec.js')
        .pipe(jasmineBrowser.specRunner())
        .pipe(jasmineBrowser.server({ port: 3001 }));
});

This time, after running gulp tests in your terminal, you'll see a message like the one below:

Jasmine server listening on port 3001

Now, all you need to do is visit localhost:3001 in your browser, and you'll see the results of your tests!

Our Code at this Point

We've made lots of changes in this lesson. Your gulpfile.js should look something like the following (note that the "tests" task for running tests in the browser has been commented out):

/*eslint-env node */

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const eslint = require('gulp-eslint');
const jasmineBrowser = require('gulp-jasmine-browser');

gulp.task('default', ['styles', 'lint'], function() {
    gulp.watch('sass/**/*.scss', ['styles']);
    gulp.watch('js/**/*.js', ['lint']);

    browserSync.init({
        server: './'
    });
});

gulp.task('styles', function() {
    gulp
        .src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(
            autoprefixer({
                browsers: ['last 2 versions']
            })
        )
        .pipe(gulp.dest('./css'))
        .pipe(browserSync.stream());
});

gulp.task('lint', function() {
    return (
        gulp
            .src(['js/**/*.js'])
            // eslint() attaches the lint output to the eslint property
            // of the file object so it can be used by other modules.
            .pipe(eslint())
            // eslint.format() outputs the lint results to the console.
            // Alternatively use eslint.formatEach() (see Docs).
            .pipe(eslint.format())
            // To have the process exit with an error code (1) on
            // lint error, return the stream and pipe to failOnError last.
            .pipe(eslint.failOnError())
    );
});

gulp.task('tests', function() {
    return gulp
        .src('tests/spec/extraSpec.js')
        .pipe(jasmineBrowser.specRunner({ console: true }))
        .pipe(jasmineBrowser.headless({ driver: 'chrome' }));
});

// gulp.task('tests', function() {
//     gulp
//         .src('tests/spec/extraSpec.js')
//         .pipe(jasmineBrowser.specRunner())
//         .pipe(jasmineBrowser.server({ port: 3001 }));
// });

Alternatively, feel free to check out the finished the finished gulpfile.jshere.